<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<script type="application/javascript" src="js/jquery-1.12.4.js"></script>
<script>
    function validate() {
        var name = $("#name").val();
        if (name == null || name == "") {
            $("#nameDiv").html("用户名不能为空");
        } else{    //发送请求到服务器
            //创建xmlhhpreuest对象
            xmlHttpRequest = createXmlHttpRequest();

            //初始化xmlHttpRequest组件
            var url = "userServlet";//服务器端URL，name为文本框获取的值
            xmlHttpRequest.open("post", url, true);
            xmlHttpRequest.setRequestHeader("Content-Type",
                "application/x-www-form-urlencoded");
            //发送请求
            xmlHttpRequest.send("name="+name);

            //设置回调函数
            xmlHttpRequest.onreadystatechange = callback;

            //自己定义的回调函数
            function callback() {
                if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {       //就绪码是4且状态码是200的时候表示正确完成
                    var data = xmlHttpRequest.responseText;//相应的数据是文本形式
                    if (data == "true") {
                        $("#nameDiv").html("已存在" );
                    } else {
                        $("#nameDiv").html("可以使用" );
                    }
                }
            }
        }
    }

    /*创建createXmlHttpRequest*/
    function createXmlHttpRequest() {
        if (window.XMLHttpRequest) {//返回值为true的时候说明是新版IE或者其他浏览器
            return new XMLHttpRequest();
        } else {
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
</script>
<body>

<from cation="" id="from1">
    <table>
        <tr>
            <td>用户名</td>
            <td><input type="text" name="name" id="name"
                       onblur="validate();"/>&nbsp;<font color="#c00fff">*</font></td>
            <td>
                <div id="nameDiv" name="nameDiv" style="display:inline"></div>
            </td>
        </tr>
    </table>
</from>
</body>
</html>